<template>
  <view :style="{'paddingTop':topHeight+'px'}" class="content">
    <!-- 顶部分段器 -->
    <view class="splitRecord" style="padding-bottom:20rpx;">
      <view style="padding: 0rpx 30rpx;">
        <view class="flex-row flex-jus-cen flex-ali-cen" style="height: 100%;">
          <view v-for="(item,index) in saveStatusList" :key="index" class="content-from"
                :style="{'margin':index == 1 ? '0 120rpx' : '0'}"
                :class="{'content-from-active':index == chooseIndex}" @click="changeStatus(index)">{{ item }}
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 内容展示 scroll -->
  <scroll-view @scrolltolower="finishPullUp" :scroll-top="scrollTop" @scroll="scroll" class="scroll" scroll-y
               :style="{'top':top+'px','height':scollHeight}" :show-scrollbar="false">
    <!-- 存酒记录 -->
    <view v-if="chooseIndex == 0" style="box-sizing: border-box">
      <view v-if="recordList.length>0" v-for="(item,index) in recordList" :key="index"
            style="background: var(--bg-center-color);height: auto;border-radius: 6rpx;padding: 20rpx;"
            :style="{'marginTop':index!=0?'30rpx':'0rpx'}">
        <view class="flex-col">
          <view class="flex-row flex-jus-bet flex-ali-cen">
            <view class="content-title-name">{{ item.save_sn }}</view>
            <view class="flex-row flex-ali-cen">
              <view class="content-title">存酒：</view>
              <view class="content-value">{{ item.create_time }}</view>
            </view>
          </view>
          <view class="flex-row flex-jus-bet flex-ali-cen" style="margin-top: 20rpx;">
            <view class="flex-row flex-ali-cen">
              <view class="content-title">桌台：</view>
              <view class="content-value">{{ item.room_name }}</view>
            </view>
            <view class="flex-row flex-ali-cen">
              <view class="content-title">销售：</view>
              <view class="content-value">{{ item.sales_name }}</view>
            </view>
            <view class="flex-row flex-ali-cen">
              <view class="content-title">存酒人：</view>
              <view class="content-value">{{ item.operator_name }}</view>
            </view>
          </view>
        </view>
        <view class="line-split" style="margin: 20rpx 0rpx;"></view>
        <view class="flex-row flex-jus-bet" style="margin-bottom: 20rpx;">
          <view class="content-title" style="width: 45%;">酒水名称</view>
          <view class="content-title" style="width: 30%;">存酒/已取/可取</view>
          <view class="content-title flex-row flex-jus-end" style="width: 25%;">到期时间</view>
        </view>
        <view class="flex-row flex-jus-bet" v-if="item.items.length>0" v-for="(detail,index1) in item.items"
              :key="index1" :style="{'marginTop':index1!=0?'30rpx':'0rpx'}">
          <view class="content-value" style="width: 45%;">{{ detail.goods_name }}</view>
          <view class="content-value" style="width: 30%;">{{ formatNumber(detail.number) }} /
            {{ formatNumber(detail.save_out_number) }} / {{ formatNumber(detail.save_number) }}
          </view>
          <view class="content-value flex-row flex-jus-end" style="width: 25%;">{{ detail.expire_time }}
          </view>
        </view>
      </view>
      <view v-if="recordList.length ==0 && requestLoading==2"
            style="font-size: 28rpx;color: var(--grey-text);text-align: center;padding-top: 220rpx">
        暂未查询到客户存酒记录~
      </view>
    </view>

    <!-- 取酒记录 -->
    <view v-if="chooseIndex == 1">
      <view v-if="recordList.length>0" v-for="(item,index) in recordList" :key="index"
            style="background: var(--bg-center-color);height: auto;border-radius: 6rpx;padding: 20rpx;"
            :style="{'marginTop':index!=0?'30rpx':'0rpx'}">
        <view class="flex-col">
          <view class="flex-row flex-jus-bet flex-ali-cen">
            <view class="flex-row flex-ali-cen">
              <view class="content-title-name">{{ item.room_name }}({{ item.sales_name }})</view>
            </view>
            <view class="flex-row flex-ali-cen">
              <view class="content-value">{{ item.out_time }}</view>
            </view>
          </view>
          <view class="flex-row flex-jus-bet flex-ali-cen" style="margin-top: 20rpx;">
            <view class="flex-row flex-ali-cen">
              <view class="content-title">存酒：</view>
              <view class="content-value">{{ item.save_room_name }}</view>
            </view>
            <view class="flex-row flex-ali-cen">
              <view class="content-title">销售：</view>
              <view class="content-value">{{ item.save_sales_name }}</view>
            </view>
            <view class="flex-row flex-ali-cen">
              <view class="content-title">操作人：</view>
              <view class="content-value">{{ item.operator_name }}</view>
            </view>
          </view>
        </view>
        <view class="line-split" style="margin: 20rpx 0rpx;"></view>
        <view class="flex-row flex-jus-bet" style="margin-bottom: 20rpx;">
          <view class="content-title" style="width: 50%;">酒水名称</view>
          <view class="content-title flex-row flex-jus-start" style="width: 25%;">取酒</view>
          <view class="content-title flex-row flex-jus-end" style="width: 25%;">
            存酒日期
          </view>
        </view>
        <view class="flex-row flex-jus-bet">
          <view class="content-value" style="width: 50%;">{{ item.goods_name }}</view>
          <view class="content-value flex-row flex-jus-start" style="width: 25%;">
            {{ formatNumber(item.number) }} / {{ item.goods_unit }}
          </view>
          <view class="content-value flex-row flex-jus-end" style="width: 25%;">{{ item.save_time }}</view>
        </view>
      </view>
      <view v-if="recordList.length ==0 && requestLoading==2"
            style="font-size: 28rpx;color: var(--grey-text);text-align: center;padding-top: 220rpx;">
        暂未查询到客户取酒记录~
      </view>
    </view>

    <!-- 剩余存酒 -->
    <view v-if="chooseIndex == 2">
      <view style="background: var(--bg-center-color);height: auto;border-radius: 6rpx;padding: 20rpx;">
        <view class="flex-row flex-jus-bet" style="margin-bottom: 20rpx;">
          <view class="content-title" style="width: 50%;">酒水名称</view>
          <view class="content-title flex-row flex-jus-start" style="width:25%;">数量 / 规格</view>
          <view class="content-title flex-row flex-jus-end" style="width: 25%;">
            到期日期
          </view>
        </view>
        <view class="line-split" style="margin: 20rpx 0rpx;"></view>
        <view class="flex-row flex-jus-bet" v-if="recordList.length>0" v-for="(item,index) in recordList" :key="index"
              :style="{'marginTop':index!=0?'30rpx':'0rpx'}">
          <view class="content-value" style="width: 50%;">{{ item.goods_name }}</view>
          <view class="content-value flex-row flex-jus-start" style="width: 25%;">
            {{ formatNumber(item.save_number) }} / {{ item.goods_unit }}
          </view>
          <view class="content-value flex-row flex-jus-end" style="width: 25%;">{{ item.expire_time }}</view>
        </view>
        <view v-if="recordList.length ==0 && requestLoading==2"
              style="font-size: 28rpx;color: var(--grey-text);text-align: center;margin: 150rpx 0rpx;">
          暂未查询到客户剩余存酒明细~
        </view>
      </view>
    </view>
    <view class="load-bottom">
      <view v-if="loadingFlag == 1" class="load_in" :class="loadingFlag == 1 ? 'load_in_ani' : ''">
        <uni-icons type="spinner-cycle" size="30" color="#ff6f3f"></uni-icons>
      </view>
      <view v-show="loadingFlag == 2" class="load_over">数据已全部加载~</view>
    </view>
  </scroll-view>

</template>

<script>
export default {
  props: {
    topHeight: {
      type: [String, Number],
      require: true,
      default: 0
    },
    customId: {
      type: [String, Number],
      require: true,
      default: 0
    }
  },
  data() {
    return {
      chooseIndex: 0,
      saveStatusList: ['存酒记录', '取酒记录', '剩余存酒'],
      pagesData: {
        page: 1,
        limit: 10,
        total: 0
      },
      recordList: [],
      scrollTop: 0,
      old: {
        scrollTop: 0
      },
      loadingFlag: 0,
      top: 0,
      scollHeight: 0,
      requestLoading: 1,
      shopIndex: this.$commonJs.getChooseShopIndex(),
      shopList: this.$commonJs.getShopList(),
    }
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query.select(".splitRecord")
        .boundingClientRect((data) => {
          this.top = data.height + this.topHeight
          let height = '100vh',
              top = data.height + 'px',
              topHeight = this.topHeight + 'px'
          this.scollHeight = `calc(${height} - ${top} - ${topHeight})`
        })
        .exec();
    this.getSaveRecord()
  },
  methods: {
    changeStatus(index) {
      this.chooseIndex = index
      if (index == 2) {
        this.pagesData.limit = 60
      } else {
        this.pagesData.limit = 15
      }
      this.resetPages()
      this.getSaveRecord()
    },
    scroll(e) {
      this.old.scrollTop = e.detail.scrollTop
    },
    finishPullUp(e) {
      if (this.loadingFlag == 1 || this.loadingFlag == 2) {
        return
      }
      let pages = Math.ceil(this.pagesData.total / this.pagesData.limit)
      if (this.pagesData.page >= pages) {
        this.loadingFlag = 2
        return
      }
      if (this.loadingFlag == 0) {
        this.loadingFlag = 1
        this.pagesData.page++
        this.getSaveRecord()
      }
    },
    getSaveRecord() {
      const self = this
      const params = {
        id: this.customId,
        page: this.pagesData.page,
        limit: this.pagesData.limit
      }
      let requestUrl = '/app/admin/wineSaveRecord'
      if (this.chooseIndex == 1) {
        requestUrl = '/app/admin/wineOutRecord'
      }
      if (this.chooseIndex == 2) {
        requestUrl = '/app/admin/reMainWineRecord'
      }
      self.$commonJs.queryCache(requestUrl, params, {
        before() {
          self.requestLoading = 1
        },
        success(res) {
          try {
            const {
              code,
              data,
              msg,
              server_ip
            } = res
            if (data.hasOwnProperty('list') && data.hasOwnProperty('count')) {
              self.recordList = [...self.recordList, ...data.list]
              self.pagesData.total = data.count
            }
          } catch (error) {
            //TODO handle the exception
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        },
        complete() {
          self.requestLoading = 2
          setTimeout(()=>{
            self.loadingFlag = 0
          },250)
        }
      },{"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },

    /**
     * 格式化处理
     * @param money
     * @returns {string|*}
     */
    formatNumber(money) {
      // 判断是否为整数（即小数部分是否为 0）
      if (money % 1 === 0) {
        return Number(money).toString()
      } else {
        return Number(money).toFixed(2)
      }
    },
    resetPages() {
      this.pagesData.page = 1
      this.loadingFlag = 0
      this.scrollTop = this.scrollTop
      this.$nextTick(() => {
        this.scrollTop = 0
      })
      this.recordList = []
    }
  }
}
</script>

<style scoped lang="scss">
.splitRecord {
  background: #1d1d1d !important;
}

@media (prefers-color-scheme: light) {
  .splitRecord {
    background: #feffff !important;
  }
}

.content-title-name {
  font-size: 28rpx;
  color: var(--white-text);
  font-weight: 600;
}

.scroll {
  box-sizing: border-box;
  display: flex;
  position: absolute;
  padding: 30rpx 30rpx 4rpx 30rpx;
}

.content-title {
  font-size: 24rpx;
  color: var(--grey-text);
}

.content-value {
  font-size: 24rpx;
  color: var(--white-text);
}

.content-from {
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  font-size: 26rpx;
  color: var(--grey-text);
}

.content-from-active {
  color: #5697D7;
  border-bottom: solid 2px #5697D7;
}

.flex {
  display: flex;
  align-items: center;

  &-row {
    flex-direction: row;
  }

  &-wrap {
    flex-wrap: wrap;
  }

  &-nowrap {
    flex-wrap: nowrap;
  }

  &-col {
    flex-direction: column;
  }

  &-1 {
    flex: 1;
  }

  &-shrink {
    flex-shrink: 0;
  }

  &-jus-cen {
    justify-content: center;
  }

  &-jus-bet {
    justify-content: space-between;
  }

  &-jus-end {
    justify-content: flex-end;
  }

  &-jus-start {
    justify-content: flex-start;
  }

  &-jus-aro {
    justify-content: space-around;
  }

  &-jus-eve {
    justify-content: space-evenly;
  }

  &-jus-self-end {
    justify-self: end;
  }

  &-ali-cen {
    align-items: center;
  }

  &-ali-sta {
    align-items: flex-start;
  }

  &-ali-end {
    align-items: flex-end;
  }
}

.content {
  width: 100vw;
}
</style>